<template>
	<view class="fixed-box">
		<view class="flex-row flex-align flex-between head-top">
			<image class="head-top-img" src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/index/logo.png">
			</image>
			<image class="zhankai" src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/index/zhankai.png"
				@click="openMenu"></image>
		</view>

		<u-popup :show="show" @close="close" @open="open" mode="right">
			<view class="w550 flex-column">
				<view class="common-box flex-column flex-center">
					<image class="zhankai" src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/turnright.png"
						@tap="close"></image>
				</view>

				<view class="menu-list flex-column">
					<view v-for="(item,index) in menuList" :key="index" class="flex-column common-box1">
						<text @tap="gotoPage(item.path)">{{item.label}}</text>
						<view v-for="(item1,index1) in item.children" :key="index1" class="flex-column common-box2">
							<text @tap.stop="gotoPage(item1.path)">{{item1.label}}</text>
						</view>
					</view>
				</view>
				<view class="xiabanbufen flex-column">
					<text class="big-title">联系我们</text>
					<view class="lianxiwomen flex-column">
						<text>全国热线：17795521225</text>
						<text>项目合作：17795521225</text>
						<text>联系邮箱：zhaojiangnan@abfree.ltd</text>
					</view>
					<text class="big-title">关注我们</text>
					<view class="guanzhuwomen flex-row flex-align">
						<image src="https://sbyd-website.oss-cn-hangzhou.aliyuncs.com/static/pic_erweima.png"
							class="qrcodepic"></image>
						<text>关注微信公众号<br>入群了解更多信息</text>
					</view>
				</view>

			</view>
		</u-popup>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				menuList: [{
						label: '首页',
						path: '/pages/index/index',
						children: []
					},
					{
						label: '关于我们',
						path: '/pages/about/about',
						children: []
					},
					{
						label: '产品介绍',
						path: '',
						children: [{
								label: '合气网',
								path: '/commonponet/heqi'
							},
							{
								label: '智慧园区',
								path: '/commonponet/park'
							},
							{
								label: '智慧水务',
								path: '/commonponet/water'
							},
							{
								label: '智慧社区',
								path: '/commonponet/shequ'
							}
						]
					},
					{
						label: '产品价格',
						path: '/pages/price/price',
						children: []
					}
				]
			};
		},
		methods: {
			gotoPage(path) {

				if (path) {
					this.show = false
					console.log('path', path)
					uni.navigateTo({
						url: path
					})
				} else {
					console.log('无效路由', path)
					return
				}

			},
			openMenu() {
				this.show = true
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-box {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10;
	}

	.head-top {
		height: 88rpx;
		background: #000;
		width: 100%;
		color: aliceblue;

	}

	.head-top-img {
		width: 192rpx;
		height: 46rpx;
		margin-left: 34rpx;
	}

	.zhankai {
		width: 36rpx;
		height: 28rpx;
		margin-right: 34rpx;
	}

	.w550 {
		width: 550rpx;
	}

	.common-box {
		padding: 0 30rpx;
		height: 76rpx;
		border-bottom: 1px solid #E5E5E5;
	}

	.menu-list {
		border-bottom: 1px solid #E5E5E5;
		padding: 0 32rpx;
	}

	.common-box1 {
		padding: 28rpx 0;
		border-bottom: 1px solid #E5E5E5;

		text {
			color: #333333;
			font-size: 26rpx;
			line-height: 26rpx;
		}
	}

	.common-box1:last-child {
		border-bottom: none;
	}

	.common-box2 {
		padding: 28rpx 28rpx;
		border-top: 1px solid #E5E5E5;

		text {
		
			color: #666666;
			font-size: 26rpx;
			line-height: 26rpx;
		}
	}

	.common-box2:nth-of-type(1) {
		margin-top: 28rpx;
	}

	.common-box2:last-child {
		padding-bottom: 0;
		// border-bottom: none;


	}

	.qrcodepic {
		width: 182rpx;
		height: 179rpx;
		box-shadow: 0px 3px 24px 0px rgba(0, 0, 0, 0.11);

	}

	.guanzhuwomen {
		margin-top: 33rpx;

		text {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 0.63);
			margin-left: 40rpx;
			text-align: center;
			line-height: 38rpx;
		}
	}

	.big-title {
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
	}

	.xiabanbufen {
		padding: 75rpx 0 0 34rpx;
	}

	.lianxiwomen {
		margin-top: 31rpx;
		margin-bottom: 49rpx;

		text {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 0.63);
			line-height: 34rpx;
		}
	}
</style>
